<template>
    <header>
      <nav>
        <ul>
          <li><router-link to="/zhuye" :class="{ active: isActive('/') }">主页</router-link></li>
          <li><router-link to="/teacher" :class="{ active: isActive('/teacher') }">我的</router-link></li>
          <li><router-link to="/history" :class="{ active: isActive('/history') }">实验室</router-link></li>
          <li><router-link to="/events" :class="{ active: isActive('/events') }">科研团队</router-link></li>
          <li><router-link to="/contact" :class="{ active: isActive('/contact') }">校园资讯</router-link></li>
        </ul>
      </nav>
    </header>
  </template>
  
  <script>
  export default {
    methods: {
      isActive(path) {
        return this.$route.path === path;
      }
    }
  }
  </script>
  <style scoped>
  header {
    background-color:rgb(57, 82, 73);
    background-size: cover;
    padding: 10px 0;
  }
  nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
  }
  nav ul li {
    margin: 0 15px;
  }
  nav ul li a {
    color: rgb(255, 255, 254);
    font-weight: 700;
    text-decoration: none;
    padding: 10px 20px; /* 添加一些内边距 */
    border-radius: 5px; /* 可选：添加圆角 */
  }
  /* 高亮样式 */

  </style>